<template>
    <div>
        <BreadCrumb />
        <div id="jx-contain" >
            <div class="jx-mainSection" v-if="skillLsibraryData">
                <div class="jx-course-name-detail">
                    <div class="jx-course-name">
                        <i class="iconfont icon-jineng"></i>
                        {{ skillLsibraryData.name }}
                        <span class="skills">技术</span>
                        <!-- <div class="fr jx-course-title" @click="CourseManage" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'"><i class="iconfont icon-guanli" ></i>课程管理</div> -->
                    </div>
                    <!--yx修改  -->
                    <div>{{ skillLsibraryData.introduction }}</div>
                    <!-- <div class="jx-course-content" v-text="CourseInfoData.introduction"></div> -->
                </div>
                <el-collapse accordion class="jx-course-collapse">
                    <el-collapse-item v-for="(item, index) in skillLsibraryData.chapterInfo" :key="index" :name="item.id">
                        <template slot="title">
                            <div>
                                <div class="jx-title-box">
                                    <div class="fl jx-blueStreak"></div>
                                    <div class="fl jx-titleText" v-text="item.name" v-if="item.studied" style="color:#c7c8c8"></div>
                                    <div class="fl jx-titleText" v-text="item.name" v-if="!item.studied" ></div>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3"  v-show=" !item.studied"></i>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 "  v-show=" item.studied" style="color:#c7c8c8"></i>
                                    <!-- <img src="../../../assets/images/computs_dark.png" width="24" v-if="item.type == 4" v-show=" item.studied"/>
                                    <img src="../../../assets/images/computs.png" width="24" v-if="item.type == 4" v-show=" !item.studied"/> -->
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4" v-show=" item.studied" style="color:#c7c8c8"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4" v-show=" !item.studied"></i>
                                    <i class="iconfont icon-zhengque" v-if="item.studied"></i>
                                </div>
                                <div class="jx-chapter-detail" v-text="item.introduction"  v-if="item.studied" style="color:#c7c8c8"></div>
                                <div class="jx-chapter-detail" v-text="item.introduction" v-else style="color:#757575"></div>
                            </div>
                        </template>
                        <div class="jx-chapter-info" v-for="(item2, index2) in item.otherInfo" :key="index2"  @click="enterLink(item2.name, item.id, item.courseId,item.name,item2.show,item2.experimentCourseFlag,item2.id)" >
                            <el-tooltip v-if="!item2.show" class="item" effect="dark" :content="item2.hideDescription" placement="bottom">
                                <i class="iconfont icon-42"></i>
                            </el-tooltip>
                            <i class="dian fl" v-else></i>
                            <span class="taskName">{{item2.name}}</span><i class="iconfont icon-diannao-copy intnet" v-if="item2.experimentCourseFlag && item2.name != '实验学习'" ></i>
                            <div class="enter" v-if="item2.show">进入 ></div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="jx-mainSection-tip" v-else>
                <img src="./../../../assets/images/index_no_data.png" />
                <p>暂无数据</p>
            </div>
        </div>
    </div>
</template>
<script>
    import BreadCrumb from "@/components/BreadCrumb.vue"
    export default{
        components: {
            BreadCrumb
        },
        data(){
            return {
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                // 技能ID
                skillLsibraryId: '',
                // 技能库页头部信息
                skillLsibraryData: '',
                //yx 添加技能名称
                skillName:''
            }
        },
        created () {
            let self = this
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 技能ID
            self.skillLsibraryId = self.$localstorage.getLocalStorage('setSkillLibraryId')
            // 章节ID
            self.chapterId = self.$route.query.chapterId

            // 初始化列表数据
            self.InitList()
        },
        methods:{
            // 初始化列表数据
            InitList(){
                let self = this
                self.$http.get('/tes/technology/'+self.skillLsibraryId+'/chapter').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.skillLsibraryData = res.data
                        self.skillName =res.data.name
                    }else if(res.code == '404'){
                        self.skillLsibraryData = ''
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 进入页面
            enterLink(name, id, courseId,chapterName,show,experimentCourseFlag,taskId){
                //专科版本建设 添加任务id 应用于实验学习部分，其他功能不变
                let self = this
                let routeData

                // name判断跳转页面
                if(show){
                    let newWindow = window.open()
                    if(name == '理论学习' || name =='任务引导'){
                        routeData = self.$router.resolve({
                            name: "CoursewareDetail",
                            query: {
                                courseId: courseId,
                                chapterId: id,
                                _btn_flag: true,
                            }
                        })
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            self.InitList()
                        }, 2000);
                    }else if(name == '教学资源'){
                        routeData = self.$router.resolve({
                            name: "CourseResourceDetail",
                            query: {
                                courseId: courseId,
                                chapterId: id,
                                _btn_flag: true,

                            }
                        })
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            self.InitList()
                        }, 2000);
                    }else if(name == '备课材料'){
                        routeData = self.$router.resolve({
                            name: "CourseMaterialDetail",
                            query: {
                                courseId: courseId,
                                chapterId: id,
                                _btn_flag: true,
                            }
                        })
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            self.InitList()
                        }, 2000);
                    }else if(name == '实验学习' || experimentCourseFlag){
                        self.chapterId = id
                        routeData = self.$router.resolve({
                            name: "VirtualMachineManual",
                            query: {
                                courseId: courseId,
                                chapterId: taskId,
                                _btn_flag: true,
                            }
                        })
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            self.InitList()
                        }, 2000);
                    }else if(name == '随堂练习'){
                        if(self.roles == 'STUDENT'){
                            routeData = self.$router.resolve({
                                name: "SPractice",
                                query: {
                                    courseId: courseId,//课程名称yx
                                    chapterId: id,
                                    chapterName:chapterName,//章节名称
                                    skillName:self.skillName, //技能名称
                                    _btn_flag: true, //技术库标识
                                }
                            })
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            routeData = self.$router.resolve({  //yx修改传参数
                                name: "TPractice",
                                query: {
                                    courseId: courseId,//课程名称yx
                                    chapterId: id,
                                    skillName:self.skillName,
                                    chapterName:chapterName,
                                    _btn_flag: true,
                                }
                            })
                        }
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            self.InitList()
                        }, 2000);
                     }
                }
            },
        }
    }
</script>

<style scoped>
    .skills{
        background: #385899;
        color: #fff;
        padding: 1px 3px;
        font-size: 12px;
        border-radius: 2px;
        display: inline-flex;

    }
    .el-collapse-item{
        border-radius: 5px;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        height: auto;
        border: none;
        line-height: none;
        display: inline;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        margin-top: 10px;
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__arrow{
        position: absolute;
        right: 32px;
        top: 28px;
        font-size: 14px;
        color: #727272;
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
    $bg_ff:$white;
    $fontBlue:$blue;
    $fontGray:$title-gray;
 .preview-top {
    height: 60px;
    margin: 0 auto;
    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
//主体
#jx-contain{
    position: relative;
    .jx-content{
        width: 1200px;
        margin: 40px auto 0;
    }
    .jx-mainSection{
        width: 1200px;
        height: auto;
        margin: 20px auto 0;
        .jx-course-collapse{
            border: none;
            .jx-chapter-detail{
                font-size: $fs14;
                padding-left: 40px;
                color: $table-gray;
                line-height: 1;
                padding-right: 32px;
                margin-top: 15px;
            }
            .enter{
                color: $table-gray;
                font-size: 12px;
                float: right;
                cursor: pointer;
                display: none;
            }
            .jx-chapter-info{
                padding-left: 40px;
                height: 36px;
                line-height: 36px;
                padding-right: 32px;
                color: $table-gray;
                cursor: pointer;
                .dian{
                    width: 4px;
                    height: 4px;
                    border-radius: 3px;
                    background: $table-gray;
                    margin: 17px 13px 0 0;
                }
                .icon-42{
                    font-size: 12px;
                    margin-right: 7px;
                    vertical-align: text-bottom;
                    margin-left: -4px;
                }
                &:hover{
                    background: #f5f7fb;
                    color: $btn-blue;
                    .dian{
                        background: $btn-blue;
                    }
                    .enter{
                        display: block;
                        color: $btn-blue;
                    }
                }
            }
            .el-collapse-item{
                position: relative;
                box-shadow: $boxShadow;
                padding: 27px 0 15px;
                background: $bg_ff;
                margin-bottom: 20px;
            }
            .jx-title-box{
                color:$fontBlue;
                line-height: 20px;
                text-align: left;
                padding-right: 32px;
                font-size: $fs16;
                height: 20px;
                .jx-blueStreak{
                    background: $fontBlue;
                    width: 2px;
                    float: left;
                    height: 18px;
                    padding: 0;
                }
                .jx-titleText{
                    padding-left:40px;
                    width: auto;
                    margin-right: 10px;
                }
                .jx-titleTip{
                    color: $btn-blue;
                    font-size: 12px;
                    margin-right: 45px;
                }
                .icon-diannao-copy{
                    color: #1277eb;
                }
                .icon-zhengque{
                    font-size: 12px;
                    color: #3fdb9b;
                }
                .icon-tubiaozhizuomoban1{
                    color: #1277eb;
                    font-size: 18px;
                }
            }
        }
        .jx-course-name-detail{
            box-shadow: $boxShadow;
            padding: 24px 33px 24px 40px;
            margin-bottom: 20px;
            background: $white;
            border-radius: 5px;
            .jx-course-name{
                color: $fontBlue;
                font-size: $fs16;

                margin-bottom: 16px;
            }
            .jx-course-title{
                font-size: 14px;
                color: $btn-blue;
                font-weight: normal;
                cursor: pointer;
                i{
                    margin-right: 5px;
                }
            }
                .jx-course-content{
                color: $table-gray;
                font-size: $fs14;
                line-height: $lh;
                margin-bottom: 20px;
            }
        }
    }
    // 暂无数据
    .no-data-tips{
        padding-top: 10%;
        text-align: center;
    }
    // 暂无数据提示
    .jx-mainSection-tip{
        text-align: center;
        margin-top: 10%;
        width: 1200px;
        margin: 40px auto;
        color: #727272;
        background: #fff;
        height: 600px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        &>p{
            margin: 30px 0;
            text-align: center;
            color: #9999;
            font-size: 16px
        }
        &>img{
            padding-top: 180px;
        }
    }
    .intnet{
        color: #1277eb;
        font-size: 14px;
        display: inline-block;
        vertical-align: 12px;
    }
    .taskName{
        margin-right: 5px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
    }

}
</style>
